<!--
 * @Author: xjt
 * @Date: 2021-06-24 23:05:20
 * @LastEditTime: 2021-06-29 02:34:09
 * @Description: 隔离点房间信息
 * @LastEditors: cqg
-->
<template>
  <basic-container v-loading="loading" element-loading-text="数据加载中...">
    <dataList
      placeholder="请输入隔离点名称"
      :pageInfo="pager"
      :listData="tableData"
      searchName="hotelName"
      :filterList="filterList"
    >
      <div slot="buttons" class="btns">
        <el-button size="small" type="primary" v-if="getPermissions('houseinfo_add')" @click="handleMenuClick('add')">新增</el-button>
        <el-button size="small" type="primary" @click="handleMenuClick('import')">房间导入</el-button>
        <v-dialog v-if="dialogShow" :show.sync="dialogVisible" width="800px" title="文件上传">
          <v-upload
            ref="fileUpload"
            modelType="file"
            @onSuccess="onSuccess"
            @onError="onError"
            :autoLoadFiles="false"
            :isView="false"
            multiple
            v-model="fileList"
          />
          <span slot="foot">
            <el-button @click="handleCancel">取 消</el-button>
            <el-button v-throttle="[commit]">上 传</el-button>
          </span>

          <div class="upload-error-list" v-if="errorList.length">
            <h5>失败原因：</h5>
            <div class="error-list">
              <p v-for="(err,index) in errorList" :key="index">{{err.errorMsg}}</p>
            </div>
          </div>
        </v-dialog>
        <el-button size="small" type="primary" @click="handleMenuClick('export')">下载房间模板</el-button>
      </div>
      <el-table
        :data="tableData"
        align="left"
        ref="multipleTable"
        @selection-change="$event => (selectDataArr = $event)"
      >
        <el-table-column type="index" width="55" />
        <el-table-column label="隔离点名称"  prop="hotelName" show-overflow-tooltip />
        <el-table-column label="所属区划"  prop="hotelStreet" width="140"/>
        <el-table-column label="楼层"  prop="roomFloor" width="80"/>
        <el-table-column label="房间号" prop="roomNum" width="80" />
        <!--<el-table-column label="房间编码" prop="houseCode" min-width="150" />-->
        <el-table-column label="使用类型" prop="useType" width="140"  :formatter="dictFormate" />
        <el-table-column label="房间状态" prop="roomState" width="100" :formatter="dictFormate" />
        <el-table-column label="备注" prop="remark"  show-overflow-tooltip />
        <el-table-column label="操作" fixed="right"  class="operaColumn" width="120" >
          <template slot-scope="scope">
            <el-button type="text" size="mini" v-if="getPermissions('houseinfo_edit')" @click="handleBtnClick('edit',scope.row)">编辑</el-button>
            <!-- <el-button type="text" size="mini" @click="handleBtnClick('qcCode',scope.row)">二维码</el-button> -->
            <el-button type="text" size="mini" @click="handleBtnClick('preview',scope.row)">查看</el-button>
            <el-button type="text" size="mini" v-if="getPermissions('houseinfo_del')" @click="handleBtnClick('delete',scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </dataList>
    <vQrcode ref="vQrcode"></vQrcode>
    <preview ref="preview"></preview>
    <editDialog ref="editDialog" />
  </basic-container>
</template>
<script>
import preview from "@/views/yq-hotel/room/preview";
import editDialog from "./edit";
import { page, delObj } from "@/views/yq-hotel/api/room.js";
import { mapGetters } from "vuex";

export default {
  components: {
    editDialog,
    preview,
  },
  provide() {
    return {
      //初始化数据
      initList: this.queryData,
    };
  },
  beforeMount() {
    this.queryData();
  },
  data() {
    return {
      menuList: ["add", { import: "导入" }, { export: "下载房间模板" }],
      // 表格列表数据
      tableData: [],
      // 请求参数
      params: {
        current: 1,
        size: 20,
        keyword: "",
      },
      // 选中的数据
      selectDataArr: [],
      // 分页
      pager: {
        total: 0, // 总页数
        current: 1, // 当前页数
        size: 20, // 每页显示多少条
      },
      // 页面loading
      loading: false,
      dialogVisible: false,
      dialogShow: false,
      fileList: [],
      errorList: [],
    };
  },
  computed: {
    ...mapGetters(["permissions"]),

    // 筛选项
    filterList() {
      return [
        { label: "所属区划", inputType: "input", name: "hotelStreet" },
        { label: "房间所属楼层", inputType: "input", name: "roomFloor" },
        { label: "房间号", inputType: "input", name: "roomNum" },
        {
          label: "使用类型",
          inputType: "dict",
          dictName: "use_type",
          name: "useType",
        },
        {
          label: "房间状态",
          inputType: "dict",
          dictName: "room_state",
          name: "roomState",
        },
      ];
    },
  },

  methods: {
    // 数据请求
    queryData(params = {}) {
      this.loading = true;
      if (this.$route.query.hotelBaseInfoId) {
        params.hotelBaseInfoId = this.$route.query.hotelBaseInfoId;
      }
      let requestData = { ...this.params, ...params };
      page(requestData)
        .then((res) => {
          const { current, size, total, records } = res.data.data;
          this.tableData = records;
          this.params = requestData;
          this.pager = { total, current, size };
        })
        .finally(() => {
          this.loading = false;
        });
    },
    //表格按钮点击事件监听
    handleBtnClick(type, row = {}) {
      switch (type) {
        case "preview":
          this.$refs.preview.show(row);
          break;
        case "qcCode": //二维码
          this.$refs.vQrcode.show({
            headText: `${row.hotelName}  ${row.roomNum}`,
            footText: `房屋编码：${row.houseCode || "无数据"} `,
            text: row.houseCode,
          });
          break;
        case "edit":
          this.$refs.editDialog.show({
            type,
            data: JSON.parse(JSON.stringify(row)),
          });
          break;
        case "delete": //删除
          this.$confirm("此操作将永久删除该数据, 是否继续?", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
            .then(async () => {
              try {
                let res = await delObj(row.houseId);
                if(res.data.code == 0){
                  this.$message.success("删除成功!");
                  this.queryData({ current: 1 });
                }
              } catch (error) {
                this.$message.fail("删除失败!");
              }
            })
            .catch(() => {
              this.$message.info("已取消删除");
            });
          break;
        // houseId
      }
    },
    // 菜单点击监听
    handleMenuClick(type) {
      switch (type) {
        case "add":
          this.$refs.editDialog.show({ type: "add" });
          break;
        case "import":
          // 导入
          this.dialogShow = true;
          this.dialogVisible = true;
          this.errorList = [];
          break;
        case "export":
          //  导出模板
          this.publicExport("隔离点房间模板", "/jdglhotelhouseinfo/download");
          break;
      }
    },
    //文件上传
    async onSuccess(response, file, fileList) {
      console.log(response);
      if (fileList === undefined || fileList.length <= 0) {
        this.$message.error("请选择要上传的文件！");
      } else {
        this.$message.success(response.msg);
        this.dialogVisible = false;
        this.dialogShow = false;
        this.queryData({ current: 1 });
      }
    },
    onError(err) {
      // 上传失败
      this.errorList = err.data||[];
      // this.$message.success(err.msg);
    },
    //确定
    commit() {
      this.$refs.fileUpload.submit("/jdglhotelhouseinfo/excelHouseImport");
    },
    // 取消
    handleCancel() {
      this.dialogVisible = false;
    },
    //字典翻译，此处根据列写死的 物业用途  物业类型 产权情况 物业状态 物业来源
    dictFormate: function (row, column, cellValue) {
      //物业类型
      let dict;
      switch (column.property) {
        case "useType":
          dict = this.getDict("use_type").find((p) => p.value == cellValue);
          break;
        case "roomState":
          dict = this.getDict("room_state").find((p) => p.value == cellValue);
          break;
      }
      if (dict) {
        return dict.label;
      }
      return "";
    },
  },
};
</script>
<style lang="scss" scoped>
.btns {
  display: flex;
  justify-content: flex-end;
  .el-button {
    margin-left: 10px;
  }
  .upload-error-list {
    h5 {
      background: #eccccc;
      line-height: 29px;
      padding-left: 10px;
      margin-top: 10px;
    }
    .error-list {
      max-height: 400px;
      overflow-y: auto;
      color: rgb(179, 11, 11);
      p{
        padding: 10px;
        border-bottom: solid 1px #ccc;
      }
    }
  }
}
</style>